<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <div class="search-header">
          <span>线上热门搜索{{ listState.searchWord1 }}</span>
          <el-dropdown>
            <span>
              <i class="el-icon-more" />
            </span>
            <!-- :append-to-body="false" -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(sale, index) of saleArr" :key="index">{{ sale.name }}</el-dropdown-item>
              <!-- <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item>双皮奶</el-dropdown-item>
              <el-dropdown-item>蚵仔煎</el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div>
        <el-row :gutter="10">
          <el-col :span="12">
            <LineCharts />
          </el-col>
          <el-col :span="12">
            <LineCharts />
          </el-col>
        </el-row>
        <!-- table表格 -->
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="排名" width="80" align="center" prop="rank" />
          <el-table-column label="搜索关键字" width="width" prop="keyWord" />
          <el-table-column label="用户数" sortable width="width" prop="users" />
          <el-table-column label="周涨幅" sortable width="width" prop="count" />
          <el-table-column label="搜索占比" sortable width="width" prop="range" />
        </el-table>
        <!-- 分页器 -->
        <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" background class="pagination" @current-change="onPageChange" />
        <!-- @size-change="handleSizeChange"
            :current-page="page"
            :page-sizes="[3, 5, 10]"
         -->
        <!-- <el-pagination
          class="pagination"
          background
          :total="total"
          :page-size="pageSize"
          :pager-count="5"
          layout="prev, pager, next,jumper, ->, sizes, total"
          @current-change="onPageChange"
        /> -->
      </div>
    </el-card>
  </div>
</template>
<script>
import LineCharts from './lineCharts'
import { mapState } from 'vuex'
export default {
  name: 'Searche',
  components: {
    LineCharts
  },
  // props: ['liststate'],
  data() {
    return {
      // saleArr: [],
      // tempArr: [],
      tableData: [],
      total: 0,
      pageSize: 4,
      // page: 1,
      // limit: 3,
      // total: 0,
      totalData: []
      // tableData: [
      //   {
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1518 弄'
      //   },
      //   {
      //     date: '2016-05-04',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1517 弄'
      //   },
      //   {
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄'
      //   },
      //   {
      //     date: '2016-05-03',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1516 弄'
      //   }
      // ]
    }
  },
  computed: {
    // saleArr() {
    //   return this.liststate.saleRank
    //   // console.log(11009);
    //   // const arr = []
    //   // this.arr = this.liststate.saleRank.forEach(item => )
    //   // return Object.values(this.liststate.saleRank)
    //   // return JSON.parse(JSON.stringify(this.liststate.saleRank.online.name))
    // },

    ...mapState({
      listState: state => state.home.list
    }),
    saleArr() {
      return this.listState.saleRank
    }
    // test() {
    //   // return this.listState.searchWord
    // }
  },
  watch: {
    listState() {
      // console.log('watch', this.listState.searchWord);
      const totalData = []
      this.listState.searchWord.forEach((item, index) => {
        totalData.push({
          id: index + 1,
          keyWord: item.word,
          count: item.count,
          users: item.user,
          range: `${((item.user / item.count) * 100).toFixed(2)}%`
        })
      })
      this.totalData = totalData
      this.total = this.totalData.length
      console.log('this.tableData', this.tableData)
      this.randerTable(1)
    }
  },
  mounted() {
    this.getData()
    // console.log('888', this.listState)
  },
  methods: {
    getData() {
      this.tableData = this.listState.searchWord
      // arr.forEach(item => {
      //   console.log('ii', item);
      //   // return item
      //   item = item.word
      // })
    },
    onPageChange(page) {
      // console.log('page', page);
      this.randerTable(page)
    },
    // handleSizeChange(limit) {
    //   // 当PageSize改变时会触发
    //   console.log(limit);
    //   this.limit = limit
    //   this.onPageChange()
    // },
    randerTable(page) {
      this.tableData = this.totalData.slice(
        (page - 1) * this.pageSize,
        (page - 1) * this.pageSize + this.pageSize
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.search-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.pagination {
  float: right;
  height: 50px;
  // text-align: right;
}
</style>
